@import "tailwindcss";

@config "../../tailwind.config.js";

:root {
  --color-primary: #146aff;
  --color-primary-dark: lch(
    from var(--color-primary) calc(l - 10) calc(c - 1) calc(h + 5)
  );
  --color-primary-light: lch(
    from var(--color-primary) calc(l + 10) calc(c + 1) calc(h - 5)
  );

  --color-success: #42bb69;
  --color-info: #b441eb;
  --color-warning: #ff601c;
  --color-alert: #fcae00;
  --color-tip: #2dc9c9;
  --color-pink: #ef478e;
  --color-danger: #ee494c;

  --color-default: oklch(0.523438 0.002 75);
  --color-strong: oklch(0.412109 0.002 75);
  --color-muted: oklch(0.853516 0.002 75);

  --color-transparent-white: rgba(255, 255, 255, 0.1);
  --color-transparent-primary: lch(from var(--color-primary) l c h / 0.1);

  --color-border-default: oklch(0.917969 0.002 75);
  --color-background-highlight: lch(from var(--color-primary) l c h / 0.25);
}

.dark {
  --color-default: oklch(0.789063 0.002 75);
  --color-strong: oklch(0.980563 0.002 75);
  --color-muted: oklch(0.523438 0.002 75);

  --color-transparent-primary: lch(from var(--color-primary) l c h / 0.3);

  --color-border-default: oklch(0.302734 0.002 75);
  --color-background-highlight: lch(from var(--color-primary) l c h / 0.5);
}

*:focus {
  outline: none;
}
